<template>
  <div class="content">
    <uv-navbar placeholder border>
      <template v-slot:left>
        <view class="uv-nav-slot">
          <view class="flex navleft" :style="iconStyle()">
            <uv-image
              src="https://oss.seenlove.com/images/56379d4d89b4dfbcf0b286596c6a4fad.jpeg"
              shape="circle"
              width="30px"
              height="30px"
            ></uv-image>
            <view class="search">
              <uv-search
                placeholder="请输入搜索内容"
                v-model="keyword"
                :showAction="false"
                @focus="show = true"
              ></uv-search>
              <uv-transition :show="show" mode="slide-left">
                <view class="school-list textRight">
                  <view
                    class="school fz12"
                    @click.stop="schoolClick(item)"
                    v-for="(item, index) in filterItem"
                    :key="index"
                    >{{ item.name }}</view
                  >
                </view>
              </uv-transition>
            </view>
          </view>
        </view>
      </template>
    </uv-navbar>

    <uv-swiper
      indicator
      :list="bannersList"
      :height="bannerHeight"
      keyName="imgUrl"
      circular
      @click="swiperClick"
    ></uv-swiper>

    <view class="wrap" @click="show = false">
      <uv-divider
        text="精品课程"
        textColor="#4196A2"
        textSize="20"
      ></uv-divider>
      <view class="grids gridColumns2 gridList">
        <view
          @click="
            proxy.$utils.toLink(
              `/packagePages/curriculum/details?id=${item._id}`
            )
          "
          v-for="(item, index) in courseList.slice(0, 6)"
          :key="index"
          class="gridItem"
        >
          <div class="img" v-if="item.coverUrl.length">
            <image :src="item.coverUrl[0]" mode="widthFix" />
          </div>
          <div class="img" v-else>
            <image
              src="https://wds-service-1258344699.file.myqcloud.com/20/17270/png/1707287994108ce287267670dc8e453f40e2ab80273fa.png?version=1707287996"
              alt=""
              mode="widthFix"
            />
          </div>
          <div class="info">
            <div
              class="twoPrice flex alignCenter"
              v-if="counter.priceRange(item.lessonContent)"
            >
              <div class="newPrice fz16 bold">
                <span>¥</span>{{ counter.priceRange(item.lessonContent) }}
              </div>
              <div class="oldPrice fz14"><span>¥</span>{{ item.price }}</div>
            </div>
            <div class="price fz16 bold" v-else>
              <span>¥</span>{{ item.price }}
            </div>
            <div class="desc fz12">{{ item.name }}</div>
            <div class="time fz12">总计课时:{{ item.courseDuration }}</div>
          </div>
          <div class="btn fz14">课程详情</div>
        </view>
      </view>
      <view
        v-if="courseList.length > 4"
        class="moreBtn flex justifyCenter"
        @click="proxy.$utils.toLink('/pages/tabbar/tabbar-2/tabbar-2', 'tab')"
      >
        <text class="fz12">更多课程</text>
      </view>
    </view>

    <view class="wrap" @click="show = false">
      <uv-divider
        text="信息资讯"
        textColor="#4196A2"
        textSize="20"
      ></uv-divider>
      <div class="service grids gridColumns2">
        <div
          class="box"
          @click="toWebView(item.link)"
          v-for="(item, index) in infoService.slice(0, 6)"
          :key="index"
        >
          <div class="top" v-if="item.isSelected">
            <image src="@/static/top.jpg" mode="aspectFill" />
          </div>
          <div class="img">
            <image :src="item.cover" mode="widthFix" />
          </div>
          <div class="data">
            <div class="name fz12">{{ item.title }}</div>
            <div class="relse fz12">
              <div class="form">{{ form_format(item.form) }}</div>
              <div class="time">{{ item.releaseDate }}</div>
            </div>
          </div>
          <div class="btn fz14">查看全文</div>
        </div>
      </div>
      <view
        v-if="infoService.length > 6"
        class="moreBtn flex justifyCenter"
        @click="proxy.$utils.toLink('/pages/tabbar/tabbar-4/tabbar-4', 'tab')"
      >
        <text>更多资讯</text>
      </view>
    </view>

    <view class="wrap" @click="show = false">
      <uv-divider
        text="校区环境"
        textColor="#4196A2"
        textSize="20"
      ></uv-divider>
      <!-- <view class="tips textCenter">嘉定新城站直达，方便快捷</view> -->

      <view class="grids gridColumns2 covers" v-if="campusEnvironment.length">
        <view
          class="cover"
          @click="proxy.$auth.previewImage(campusEnvironment, index)"
          v-for="(item, index) in campusEnvironment"
          :key="index"
        >
          <image :src="item" mode="widthFix" />
        </view>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();

let banners = ref([]);
let bannerHeight = ref(0);
let courseList = ref([]); //课程列表
let infoService = ref([]); //信息资讯
let dicts = ref([]); //字典
let keyword = ref(""); //搜索关键字
let show = ref(false); //搜索框显示
let campusEnvironment = ref([]);

let filterItem = computed(() => {
  let arr = [];
  if (counter.ycMpParams.courseList) arr = counter.ycMpParams.courseList;
  return arr.filter((user) => {
    return user.name.includes(keyword.value);
  });
});

let bannersList = computed(() => {
  let array = [...banners.value];
  let list = [];
  array.forEach((element) => {
    if (element.show == 1) list.push(element);
  });
  console.log("轮播图", list);
  return list;
});

onLoad(() => {
  getInfo();
  getInfoService();
  getDict();
  // #ifdef MP-WEIXIN
  counter.init();
  // #endif
});

function toWebView(pageUrl) {
  let linkUrl = pageUrl.split("?");
  proxy.$utils.toLink(
    `/packagePages/currency/webView?url=${
      linkUrl[0]
    }&params=${encodeURIComponent(linkUrl[1])}`
  );
}

function schoolClick(e) {
  proxy.$utils.toLink(`/packagePages/curriculum/details?id=${e._id}`);
  show.value = false;
}

function swiperClick(e) {
  counter.tab2Params = [...bannersList.value[e].type];
  proxy.$utils.toLink("/pages/tabbar/tabbar-2/tabbar-2", "tab");
}

function iconStyle() {
  let right = 0;
  // #ifdef MP-WEIXIN
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  right = menuButtonInfo.width;
  // #endif
  return {
    paddingRight: `${right}px`,
  };
}

async function getDict() {
  dicts.value = await proxy.$apis.getDict({
    type: "query",
    data: { code: "info_source" },
  });
}

function form_format(e) {
  let index = proxy.$utils.findIndexByField(dicts.value, "dict_code", e);
  if (index != -1) return dicts.value[index].dict_label;
}

async function getInfo() {
  courseList.value = await proxy.$apis.webCourse({ type: "query" });
  counter.setYcParams("courseList", courseList.value);
}

async function getInfoService() {
  let { rows } = await proxy.$apis.realInfo({
    type: "list",
    data: { pageIndex: 1, pageSize: 7 },
  });
  infoService.value = rows;
}

async function getBannerInfo() {
  banners.value = counter.ycMpParams.basicInfo.banners;
  let { width, height } = await proxy.$auth.getImageInfo(
    banners.value[0].imgUrl
  );

  bannerHeight.value = calculateAspectRatioHeight(
    width,
    height,
    counter.windowWidth
  );

  function calculateAspectRatioHeight(
    originalWidth,
    originalHeight,
    targetWidth
  ) {
    const aspectRatio = originalWidth / originalHeight;
    const targetHeight = targetWidth / aspectRatio;
    return targetHeight;
  }
}

watch(
  () => counter.ycMpParams.basicInfo,
  (newValue, oldValue) => {
    if (newValue && newValue.banners) {
      getBannerInfo();
    }
    if (newValue && newValue.campusEnvironment) {
      campusEnvironment.value = newValue.campusEnvironment;
    }
  },
  { deep: true, immediate: true }
);
</script>

<style lang="scss" scoped>
.content {
  min-height: 100vh;
  background-color: #f8f8f8;
}
.navleft {
  .search {
    margin-left: 10px;
    position: relative;
    .school-list {
      width: 80vw;
      position: absolute;
      max-height: 300px;
      overflow-y: auto;
      top: 0;
      left: 0;
      background-color: white;
      padding-bottom: 20px;
      z-index: 1;
      border-radius: 5px 5px 10px 10px;
      .school {
        padding: 10px 10px 0 10px;
      }
    }
  }
}
.wrap {
  padding: 15px 10px;
  .gridList {
    gap: 15px 13px; //上下间距 左右间距
    .gridItem {
      background-color: white;
      border-radius: 5px 5px 10px 10px;
      box-shadow: 2px 5px 5px 2px #e2e2e2;
      overflow: hidden;
      image {
        width: 100%;
        display: block;
      }
      .info {
        padding: 10px;
        .twoPrice {
          .newPrice {
            color: #f66604;
          }
          .oldPrice {
            text-decoration: line-through;
            color: #999999;
            margin-left: 10px;
          }
        }
        .price {
          color: #f66604;
        }
        .desc {
          color: #333333;
          margin: 8px 0 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
        .time {
          color: #686868;
          margin-bottom: 5px;
        }
      }
      .btn {
        width: 90%;
        margin: 0 auto 10px;
      }
    }
  }
  .btn {
    background-color: #4196a2;
    border-radius: 25px;
    margin-top: 10px;
    text-align: center;
    color: white;
    line-height: 28px;
    cursor: pointer;
  }
  .moreBtn {
    margin-top: 20px;
    cursor: pointer;
    text {
      background: #e6963c;
      font-family: "Microsoft YaHei", "微软雅黑";
      font-size: 14px;
      height: 28px;
      line-height: 28px;
      color: white;
      text-align: center;
      border-radius: 40px;
      padding: 1px 30px;
    }
  }

  .service {
    gap: 15px 13px; //上下间距 左右间距
    .box {
      background-color: white;
      border-radius: 5px 5px 10px 10px;
      box-shadow: 2px 5px 5px 2px #e2e2e2;
      overflow: hidden;
      position: relative;
      .top {
        position: absolute;
        top: 0;
        right: 0;
        width: 70px;
        height: 70px;
        z-index: 1;
        image {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .data {
        border-radius: 0 0 10px 10px;
        padding: 10px;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
          min-height: 34px;
        }
        .relse {
          padding-top: 5px;
          .form {
            color: #349ad6;
            padding-bottom: 3px;
          }
        }
      }
      .btn {
        width: 90%;
        margin: 0 auto 10px;
      }
    }
  }

  .tips {
    color: #999999;
    margin-bottom: 15px;
  }
  .covers {
    gap: 3px 10px; //上下间距 左右间距
  }
}
</style>
